<template>

			
			<uni-card :is-shadow="true">
				<uni-forms-item label="" >
					<uni-easyinput v-model="tableName" placeholder="请输入表单名称" />
				</uni-forms-item>
				<view v-for="(item,index) in tableList">
					
					<!-- 文本框 -->
					<uni-row class="demo-uni-row" v-if="item.type ==1" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							<uni-easyinput v-model="item.content" placeholder="请输入内容" />
						</uni-col>
						<uni-col :span="4">
							<button style="margin-top: 5px;margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					<!-- 单选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==2" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							<uni-data-checkbox   :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					<!-- 复选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==3" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							
							<uni-data-checkbox multiple  :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					<!-- 下拉列表-->
					<uni-row class="demo-uni-row" v-if="item.type ==4" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							
							<uni-data-select
							      
							     :localdata="item.optionList"
							    
							    ></uni-data-select>
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					<!-- 图片-->
					<uni-row class="demo-uni-row" v-if="item.type ==5" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							<button class="mini-btn" type="primary" size="mini">选择图片</button>
							<!-- <uni-file-picker limit="8" title="最多选择8张图片"></uni-file-picker> -->
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					<!-- 视频-->
					<uni-row class="demo-uni-row" v-if="item.type ==6" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							<button class="mini-btn" type="primary" size="mini">选择视频</button>
							<!-- <uni-file-picker limit="8" file-mediatype="video" title="最多选择8个视频"></uni-file-picker> -->
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
					
					<!-- 日期-->
					<uni-row class="demo-uni-row" v-if="item.type ==7" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="16">
							
							<uni-datetime-picker type="date" :clear-icon="false"  />
						</uni-col>
						<uni-col :span="4">
							<button style="margin-left: 7px;" class="mini-btn" type="default" size="mini" @click="editItem(index,item)">编辑</button>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
			
			<view>
				<!-- 文本框-->
				<uni-card :is-shadow="false" v-show="textShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="textContent" placeholder="请输入文本框标题" />
					</uni-forms-item>
					
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(1)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(1)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 单选框-->
				<uni-card :is-shadow="false"  v-show="radioShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="radioContent" placeholder="请输入单选框标题" />
					</uni-forms-item>
					<view v-for="(item,index) in radioList">
						
					
						<uni-row class="demo-uni-row" v-show="item.status" >
							<uni-col :span="20">
								<view >

									<uni-easyinput v-model="item.text" placeholder="请输入选项" />
									
								</view>
							</uni-col>
							<uni-col :span="4">
								<view style="margin-top: 5px;margin-left: 5px;">
									
									<button class="mini-btn" type="default" size="mini" @click="removeRadioOption(index,item)">删除</button>
									
								</view>
							</uni-col>
						</uni-row>
					</view>
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
				
							
								<button type="default" plain="true" size="mini" @click="addRadioOption()">增加选项</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button type="default" plain="true" size="mini" @click="removeRadioOption(-1,{})">清空选项</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(2)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(2)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 复选框-->
				<uni-card :is-shadow="false" v-show="checkboxShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="checkboxContent" placeholder="请输入复选框标题" />
					</uni-forms-item>
					<view v-for="(item,index) in checkboxList">
						<uni-row class="demo-uni-row" v-show="item.status" >
							<uni-col :span="20">
								<view >
									<uni-easyinput v-model="item.text" placeholder="请输入选项" />
								</view>
							</uni-col>
							<uni-col :span="4">
								<view style="margin-top: 5px;margin-left: 5px;">
									<button class="mini-btn" type="default" size="mini" @click="removeCheckboxOption(index,item)">删除</button>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
								<button type="default" plain="true" size="mini" @click="addCheckboxOption()">增加选项</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								<button type="default" plain="true" size="mini" @click="removeCheckboxOption(-1,{})">清空选项</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(3)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(3)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 下拉框-->
				<uni-card :is-shadow="false" v-show="selectShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="selectContent" placeholder="请输入下拉框标题" />
					</uni-forms-item>
					<view v-for="(item,index) in selectList">
						<uni-row class="demo-uni-row" v-show="item.status" >
							<uni-col :span="20">
								<view >
									<uni-easyinput v-model="item.text" placeholder="请输入选项" />
								</view>
							</uni-col>
							<uni-col :span="4">
								<view style="margin-top: 5px;margin-left: 5px;">
									<button class="mini-btn" type="default" size="mini" @click="removeSelectOption(index,item)">删除</button>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<uni-row class="demo-uni-row" >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
								<button type="default" plain="true" size="mini" @click="addSelectOption()">增加选项</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								<button type="default" plain="true" size="mini" @click="removeSelectOption(-1,{})">清空选项</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(4)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(4)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 图片-->
				<uni-card :is-shadow="false" v-show="imageShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="imageContent" placeholder="请输入图片标题" />
					</uni-forms-item>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(5)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(5)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 视频-->
				<uni-card :is-shadow="false" v-show="videoShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="videoContent" placeholder="请输入视频标题" />
					</uni-forms-item>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(6)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(6)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				<!-- 日期-->
				<uni-card :is-shadow="false" v-show="timeShow">
					<uni-forms-item label="" >
						<uni-easyinput v-model="timeContent" placeholder="请输入日期标题" />
					</uni-forms-item>
					<uni-row class="demo-uni-row"  >
						<uni-col :span="6">&nbsp;</uni-col>
						<uni-col :span="6">
							<view >
										
							
								<button  type="default" plain="true" size="mini"  @click="deleteItem(7)">删除元素</button>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view >
								
								<button  type="default" plain="true" size="mini"  @click="saveItem(7)">保存元素</button>
							</view>
						</uni-col>
						<uni-col :span="6"></uni-col>
					</uni-row>
				</uni-card>
				
				
			</view>
			
			
			
		<view class="button-sp-area">
			<uni-forms-item label="" >
				<button type="primary" plain="true" @click="showElement()">添加元素</button>
			</uni-forms-item>
		</view>
		<uni-card :is-shadow="false">
			<uni-forms-item label="" >
				<button type="primary" @click="submit()">保存</button>
			</uni-forms-item>
		</uni-card>
	
			
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup"  >
					<uni-card :is-shadow="false">
						
						<view class="popup-content" >
							
							<uni-row class="demo-uni-row" >
								<uni-col :span="12">
									<view >
										
										<button type="default" plain="true" @click="addElement(1)">文本框</button>
										
									</view>
								</uni-col>
								<uni-col :span="12">
									<view >
										
										<button type="default" plain="true" @click="addElement(2)">单选框</button>
									</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" >
								<uni-col :span="12">
									<view >
									
										<button type="default" plain="true" @click="addElement(3)">复选框</button>
										
									</view>
								</uni-col>
								<uni-col :span="12">
									<view >
									
										<button type="default" plain="true" @click="addElement(4)">下拉列表</button>
									</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" >
								<uni-col :span="12">
									<view >
										
										<button type="default" plain="true" @click="addElement(5)">图片</button>
										
									</view>
								</uni-col>
								<uni-col :span="12">
									<view >
										
										<button type="default" plain="true" @click="addElement(6)">视频</button>
									</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" >
								<uni-col :span="12">
									<view >
										
										<button type="default" plain="true" @click="addElement(7)">日期</button>
										
									</view>
								</uni-col>
								<uni-col :span="12">
									<view >
										
										<!-- <button type="default" plain="true" @click="addElement(8)">倒计时</button> -->
									</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" >
								<uni-col :span="12">
									<view style="background-color:#fff">
										
										
										
									</view>
								</uni-col>
								<uni-col :span="12">
									<view style="background-color:#fff">
										
										
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-card>
					
				</uni-popup>
			</view>		
				
</template>

<script>
	import http from '@/store/http.js'
	export default {
			data() {
				return {
					tableName:"",
					textShow:false,
					radioShow:false,
					checkboxShow:false,
					selectShow:false,
					imageShow:false,
					videoShow:false,
					timeShow:false,
					radioList:[
							{
								text:"",
								status:true
							}
						],
					checkboxList:[
						{
							text:"",
							status:true
						}
					],
					selectList:[
						{
							text:"",
							status:true
						}
					],
					textContent:"",
					radioContent:"",
					checkboxContent:"",
					selectContent:"",
					imageContent:"",
					videoContent:"",
					timeContent:"",
					editIndex:-1,
					tableList:[
						// {
						// 	type:0,
						// 	name:"文本框测试用的递增",
						// 	content:"",
						// 	optionList:[
						// 		{
						// 			text: '男',
						// 			value: 0
						// 		}, {
						// 			text: '女',
						// 			value: 1
						// 		}
						// 	]
						// }
					],
					
					
					
					
					
				}
			},
			onLoad(option) {
				
				
				
			},
			watch: {
			
			},
			mounted() {
			
			},
	
			methods:{
				showContentToast(title){
					uni.showToast({
					  title: title,
					  icon: "none"
					})
				},
				editItem(index,item){
					this.$data.editIndex=index;
					
					console.log(JSON.stringify(item))
					
					let list=[];
					if(item.optionList.length>0){
						for(let i=0;i<item.optionList.length;i++){
							let data={
										text:item.optionList[i].text,
										status:true
									};
							list.push(data);
						}
					}
					
					
					switch(item.type){
						case 1:
							
							this.$data.textContent=item.name;
							this.$data.textShow=true;
							break;
						case 2:
							
							
							this.$data.radioList=list;
							this.$data.radioContent=item.name;
							this.$data.radioShow=true;
							break;
						case 3:
							
							
							this.$data.checkboxList=list;
							this.$data.checkboxContent=item.name;
							this.$data.checkboxShow=true;
							break;
						case 4:
							
							this.$data.selectList=list;
							this.$data.selectContent=item.name;
							this.$data.selectShow=true;
							break;
						case 5:
							this.$data.imageContent=item.name;
							this.$data.imageShow=true;
							break;
						case 6:
							this.$data.videoContent=item.name;
							this.$data.videoShow=true;
							break;
						case 7:
							this.$data.timeContent=item.name;
							this.$data.timeShow=false;
							break;
					}
					console.log(JSON.stringify(item))
				},
				saveItem(type){
					
					
					var  data={
							type:type,
							name:"",
							content:"",
							optionList:[]
						}
					
					switch(type){
						case 1:
						
							if(this.$data.textContent.length>0){
								data.name=this.$data.textContent;
								this.checkSaveOrUpdate(data);
								
								
								this.$data.textContent="";
								this.$data.textShow=false;
							}else{
								this.showContentToast("标题不可以为空");
							}
							
							break;
						case 2:
							if(this.$data.radioContent.length>0){
								data.name=this.$data.radioContent;
								var length =this.$data.radioList.length;
								var emptyStatus=false;
								for(var i=0;i<length;i++){
									if(this.$data.radioList[i].status){
										if(this.$data.radioList[i].text.length==0){
											emptyStatus=true;
										}
										var option ={
											text: this.$data.radioList[i].text,
											value: i
										}
										data.optionList.push(option);
									}
									
								}
								if(emptyStatus){
									this.showContentToast("选项不可以为空");
								}else{
									this.checkSaveOrUpdate(data);
									this.$data.radioList=[{text:"",status:true}];
									this.$data.radioContent="";
									this.$data.radioShow=false;
								}	
							}else{
								this.showContentToast("标题不可以为空");
							}
							
							break;
						case 3:
							if(this.$data.checkboxContent.length>0){
								data.name=this.$data.checkboxContent;
								var length =this.$data.checkboxList.length;
								var emptyStatus=false;
								for(var i=0;i<length;i++){
									if(this.$data.checkboxList[i].text.length==0){
										emptyStatus=true;
									}
									var option ={
										text: this.$data.checkboxList[i].text,
										value: i
									}
									data.optionList.push(option);
								}
								if(emptyStatus){
									this.showContentToast("选项不可以为空");
								}else{
									this.checkSaveOrUpdate(data);
									this.$data.checkboxList=[{text:"",status:true}];
									this.$data.checkboxContent="";
									this.$data.checkboxShow=false;
								}	
							}else{
								this.showContentToast("标题不可以为空");
							}
							
							break;
						case 4:
							if(this.$data.selectContent.length>0){
								data.name=this.$data.selectContent;
								
								var length =this.$data.selectList.length;
								var emptyStatus=false;
								for(var i=0;i<length;i++){
									if(this.$data.selectList[i].text.length==0){
										emptyStatus=true;
									}
									var option ={
										text: this.$data.selectList[i].text,
										value: i
									}
									data.optionList.push(option);
								}
								if(emptyStatus){
									this.showContentToast("选项不可以为空");
								}else{
									this.checkSaveOrUpdate(data);
									this.$data.selectContent="";
									this.$data.selectList=[{text:"",status:true}];
									this.$data.selectShow=false;
								}	
							}else{
								this.showContentToast("标题不可以为空");
							}
							
							break;
						case 5:
							if(this.$data.imageContent.length>0){
								data.name=this.$data.imageContent;
								this.checkSaveOrUpdate(data);
								this.$data.imageContent="";
								this.$data.imageShow=false;
							}else{
								this.showContentToast("标题不可以为空");
							}
							
							break;
						case 6:
							if(this.$data.videoContent.length>0){
								data.name=this.$data.videoContent;
								this.checkSaveOrUpdate(data);
								this.$data.videoContent="";
								this.$data.videoShow=false;
							}else{
								this.showContentToast("标题不可以为空");
							}
								
							break;
						case 7:
							if(this.$data.timeContent.length>0){
								data.name=this.$data.timeContent;
								this.checkSaveOrUpdate(data);
								this.$data.timeContent="";
								this.$data.timeShow=false;
							}else{
								this.showContentToast("标题不可以为空");
							}
						
							
							break;
					}
					this.$data.editIndex=-1;
					
				},
				checkSaveOrUpdate(data){
					if(this.$data.editIndex==-1){
						this.$data.tableList.push(data);
					}else{
						var length=this.$data.tableList.length;
						if(length>0){
							var list=[];
							for(let i=0;i<length;i++){
								if(i==this.$data.editIndex){
									list.push(data);
								}else{
									list.push(this.$data.tableList[i])
								}
							}
							this.$data.tableList=list;
						}else{
							this.$data.tableList.push(data);
						}
						
					}
				},
				deleteItem(type){
					if(this.$data.editIndex!=-1){
						var length=this.$data.tableList.length;
						if(length>0){
							var list=[];
							for(let i=0;i<length;i++){
								if(i!=this.$data.editIndex){
									list.push(this.$data.tableList[i])
								}
							}
							this.$data.tableList=list;
						}
						this.$data.editIndex=-1;
					}
					
					switch(type){
						case 1:
							this.$data.textContent="";
							this.$data.textShow=false;
							break;
						case 2:
							this.$data.radioContent="";
							this.$data.radioList=[{text:"",status:true}];
							this.$data.radioShow=false;
							break;
						case 3:
							this.$data.checkboxList=[{text:"",status:true}];
							this.$data.checkboxContent="";
							this.$data.checkboxShow=false;
							break;
						case 4:
							this.$data.selectList=[{text:"",status:true}];
							this.$data.selectContent="";
							this.$data.selectShow=false;
							break;
						case 5:
							this.$data.imageContent="";
							this.$data.imageShow=false;
							break;
						case 6:
							this.$data.videoContent="";
							this.$data.videoShow=false;
							break;
						case 7:
							this.$data.timeContent="";
							this.$data.timeShow=false;
							break;
					}
				},
				removeSelectOption(index,item){
					console.log(index);
					if(index==-1){
						this.$data.selectList=[];
						this.addSelectOption();
					}else{
						var length=this.$data.selectList.length;
						var count=0;
						for(let i=0;i<length;i++){
							if(this.$data.selectList[i].status==true){
								count++;
							}
						}
						if(count>1){
							this.$data.selectList[index].status=false;
						}else{
							
							this.showContentToast("至少要存在一个选项");
						}
					}
				},
				addSelectOption(){
					var item={text:"",status:true};
					this.$data.selectList.push(item);
				},
				removeCheckboxOption(index,item){
					console.log(index);
					if(index==-1){
						this.$data.checkboxList=[];
						this.addCheckboxOption();
					}else{
						var length=this.$data.checkboxList.length;
						var count=0;
						for(let i=0;i<length;i++){
							if(this.$data.checkboxList[i].status==true){
								count++;
							}
						}
						if(count>1){
							this.$data.checkboxList[index].status=false;
						}else{
							uni.showToast({
							  title: "至少要存在一个选项",
							  icon: "none"
							})
						}
					}
				},
				addCheckboxOption(){
					var item={text:"",status:true};
					this.$data.checkboxList.push(item);
				},
				removeRadioOption(index,item){
					console.log(index);
					if(index==-1){
						this.$data.radioList=[];
						this.addRadioOption();
					}else{
						var length=this.$data.radioList.length;
						var count=0;
						for(let i=0;i<length;i++){
							if(this.$data.radioList[i].status==true){
								count++;
							}
						}
						if(count>1){
							this.$data.radioList[index].status=false;
						}else{
							uni.showToast({
							  title: "至少要存在一个选项",
							  icon: "none"
							})
						}
					
						
						
					}
					
				},
				addRadioOption(){
					var item={text:"",status:true};
					this.$data.radioList.push(item);
				},
				addElement(type){
					this.$refs.popup.close();
					
					switch(type){
						case 1:
							this.$data.textShow=true;
							break;
						case 2:
							this.$data.radioShow=true;
							break;
						case 3:
							this.$data.checkboxShow=true;
							break;
						case 4:
							this.$data.selectShow=true;
							break;
						case 5:
							this.$data.imageShow=true;
							break;
						case 6:
							this.$data.videoShow=true;
							break;
						case 7:
							this.$data.timeShow=true;
							break;
					}
					
				},
				showElement() {
					
				
					this.$refs.popup.open("bottom")
				},
				submit(){
					if(this.$data.tableName.length>0){
						if(this.$data.tableList.length>0){
							var data={
								name:this.$data.tableName,
								field:[]
							};
							
							for(let i=0;i<this.$data.tableList.length;i++){
								var value=this.$data.tableList[i];
								var item={
									type:value.type,
									name:value.name,
									option:[]
								};
								
								if(value.optionList.length>0){
									console.log("length++++")
									for(var j=0;j<value.optionList.length;j++){
										console.log("test"+j)
										var optionItem={
											name:value.optionList[j].text
										}
										item.option.push(optionItem);
										console.log(JSON.stringify(item.option))
									}
								}
								
								data.field.push(item);
								
							}
							var self=this;
							http.post("/api/template/addTemplate",data,(result)=>{
								if(result.status){
									uni.redirectTo({
										url:"/pages/template/templateList"
									})
								}else{
									self.showContentToast(result.msg);
								}
								
							})
						}else{
							this.showContentToast("表格元素不可以为空");
						}
						
						
					}else{
						this.showContentToast("表格名称不可以为空");
					}
					
					this.$data.tableName
					console.log(JSON.stringify(this.$data.tableList))
					
				},
			}
		}
</script>

<style>
.example-body {
	background-color: #fff;
	padding: 10px;
}

.example {
	padding: 15px;
	background-color: #fff;
}
.button-sp-area{
	margin: 0 auto;
	width: 60%;
}
.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		
	}

	.popup-height {
		@include height;
		width: 200px;
	}
	.demo-uni-row{
		padding-bottom: 20px;
	}
</style>